<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <!-- Define Charset -->
    <meta charset="utf-8">
    
    <!-- Page Title -->
    <title>Dynamo - Sell/Buy/Rent Cars Online HTML5 Responsive Template - Single News Post</title>

    <!-- Responsive Metatag -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
       
    <!-- CSS -->
    <link rel="stylesheet" href="css/bootstrap.css"/>
                    
    
    <!-- Font icons -->
    <link rel="stylesheet" href="css/fontello.css" >
    <!--[if IE 7]>
    <link rel="stylesheet" href="css/fontello-ie7.css" ><![endif]-->
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="css/media-queries.css" />

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>        
    <![endif]-->

    <!-- Media queries -->
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
</head>

<body>
    <header>
        <!-- begin Top Bar -->
        <div class="topbar" >
            <jsp:include page="import/topbar.jsp"/>
        </div>
        <!-- end Top Bar -->
        
        <!-- begin NavBar -->
        <nav class="navbar" role="navigation">
            <jsp:include page="import/navbar.jsp"/>
        </nav>
        <!-- end NavBar -->

        <!-- begin Sub Bar -->
        <div class="subbar" >
            <jsp:include page="import/sub-bar.jsp"/>
        </div>
        <!-- end Sub Bar --> 
    </header>




    <section id="snews">
        <div class="container"> 

            <div class="row pagetitle">
                <div class="col-xs-12">
                    <h2>Single Page Post</h2>
                </div>
            </div>  

            <div class="row">
                <article>
                    <div class="col-md-9">
                        <section>

                        <!-- Article -->
                        <article class="post">
                            <h3>Elucidate vehicula existence</h3>

                            <div class="info"><span><i class="icon-calendar"></i>January 07, 2012</span><span><i class="icon-user"></i>Admin</span><span><i class="icon-comment"></i>Comments</span></div>

                            <div class="post-img">
                                <a class="fancybox" data-rel="gallery" href="img/news/news1.jpg" title="Car title">
                                    <img src="img/news/news1.jpg" alt="//">
                                </a>
                            </div>

                            <p>A good design can feel like something you have always been waiting for without knowing. Exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto sport.</p>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            <blockquote class="action">
                                <a class="btn red">Get a tutor Now!</a>
                                Carefully read the documentation to<br >
                                create a professional website
                            </blockquote>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>

                            <blockquote>
                                Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse
                                cillum dolore eu fugiat nulla pariatur.
                            </blockquote>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            <footer>
                                <div class="tags pull-left">
                                    <i class="icon-tag"></i>
                                    <a href="#?tags=logo">logo,</a> <a href="#?tags=vector">vector,</a> <a href="#?tags=design">design,</a> <a href="#?tags=strategy">strategy</a>  
                                </div>
                            </footer>

                            <h3>Author</h3>
                            <img src="img/single-post/author.jpg" alt="//" class="img-author">
                            <h4>John Doe</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </article>
                        <!-- end Article -->


                        <!-- Recent posts -->
                        <h3>Recent Posts</h3>
                        <div id="carousel-recent-posts" class="carousel slide">
                            
                            <!-- Controls -->
                            <a class="carousel-control" href="#carousel-recent-posts" data-slide="prev">
                            <span class="icon-left-open-mini"></span>
                            </a>
                            <a class="carousel-control next" href="#carousel-recent-posts" data-slide="next">
                            <span class="icon-right-open-mini"></span>
                            </a>

                            <!-- Carroussel items -->
                            <div class="carousel-inner">

                                <div class="item active">
                                    <div class="recent-posts">
                                        <img src="img/single-post/posts1.jpg" alt="//">
                                        <a href="#"> Looking for a car?</a>
                                        <span>April 25, 2015</span>
                                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                    </div>
                                    <div class="recent-posts">
                                        <img src="img/single-post/posts2.jpg" alt="//">
                                        <a href="#">Toyota recovers </a>
                                        <span>April 25, 2015</span>
                                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                    </div>
                                    <div  class="recent-posts">
                                        <img src="img/single-post/posts3.jpg" alt="//">
                                        <a href="#">Citroen New Design</a>
                                        <span>April 25, 2015</span>
                                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                    </div>
                                </div>

                                <div class="item">
                                    <div class="recent-posts">
                                        <img src="img/single-post/posts2.jpg" alt="//">
                                        <a href="#">Volvo extra space</a>
                                        <span>April 25, 2015</span>
                                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                    </div>
                                    <div class="recent-posts">
                                        <img src="img/single-post/posts1.jpg" alt="//">
                                        <a href="#">Car dealers</a>
                                        <span>April 25, 2015</span>
                                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                    </div>
                                    <div class="recent-posts">
                                        <img src="img/single-post/posts3.jpg" alt="//">
                                        <a href="#">Citroen New Design</a>
                                        <span>April 25, 2015</span>
                                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                    </div>
                                </div>

                            </div>
                            <!-- end Carroussel items -->
                        </div>
                        <!-- end Recent posts -->


                        <!-- Comments -->
                        <article class="post">                      
                        <h3>18 comments</h3>

                        <section class="container-comments">
                        <article class="single-comment">
                            <img src="img/single-post/avatar.jpg" alt="//" />
                            <h4>John Doeter - <a href="#">reply</a></h4>
                            <small>April 25, 2012</small>
                            <p>Aenean tincidunt, dui vel  placerat mollis, ante turpis lacinia risus, non molestie turpis sem id nibh. Pellentesque sed nunc massa. In hac habitasse platea dictumst. Mauris in rhoncus ipsum. Fusce congue dapibus lacus vel cursus. </p>
                        </article>

                        <article class="single-comment reply">
                            <img src="img/single-post/avatar.jpg" alt="//" />
                            <h4>John Doeter - <a href="#">reply</a></h4>
                            <small>April 25, 2012</small>
                            <p>Aenean tincidunt, dui vel  placerat mollis, ante turpis lacinia risus, non molestie turpis sem id nibh. Pellentesque sed nunc massa. In hac habitasse platea dictumst. Mauris in rhoncus ipsum. Fusce congue dapibus lacus vel cursus. </p>
                        </article>

                        <article class="single-comment reply">
                            <img src="img/single-post/avatar.jpg" alt="//" />
                            <h4>John Doeter - <a href="#">reply</a></h4>
                            <small>April 25, 2012</small>
                            <p>Aenean tincidunt, dui vel  placerat mollis, ante turpis lacinia risus, non molestie turpis sem id nibh. Pellentesque sed nunc massa. In hac habitasse platea dictumst. Mauris in rhoncus ipsum. Fusce congue dapibus lacus vel cursus. </p>
                        </article>

                        <article class="single-comment">
                            <img src="img/single-post/avatar.jpg" alt="//" />
                            <h4>John Doeter - <a href="#">reply</a></h4>
                            <small>April 25, 2012</small>
                            <p>Aenean tincidunt, dui vel  placerat mollis, ante turpis lacinia risus, non molestie turpis sem id nibh. Pellentesque sed nunc massa. In hac habitasse platea dictumst. Mauris in rhoncus ipsum. Fusce congue dapibus lacus vel cursus. </p>
                        </article>

                        <ul class="pagination">
                            <li><a href="#">&laquo; Prev</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">Next &raquo;</a></li>
                        </ul>

                        <article class="form-comment">
                        <h3>Leave a comment</h3>

                        <form role="form">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="name">Name: (Required)</label>
                                    <input class="form-control" id="name">
                                </div>
                                <div class="form-group">
                                    <label for="email">Email: (Required)</label>
                                    <input class="form-control" id="email">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="surname">Surname:</label>
                                    <input class="form-control" id="surname">
                                </div>
                                <div class="form-group">
                                    <label for="website">Website:</label>
                                    <input class="form-control" id="website">
                                </div>
                            </div>

                        </div>
                            
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label for="comment">Comment</label>
                                <textarea id="comment" class="form-control" rows="6"></textarea>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-8">
                                <button type="submit" class="btn btn-alt">Post a comment</button>
                            </div>
                        </div>

                        </form>

                        </article>

                        <div class="row">
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-navigation pull-left">&lt; Previous Post</button>
                            </div>
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-navigation pull-right">Next Post &gt;</button>
                            </div>
                        </div>
                        </section>
                        </article>
                        <!-- end Comments -->
                        </section>  
                    </div>

                    <!-- Sidebar -->
                    <aside class="col-md-3">
                        <!-- Tabs -->   
                        <div class="row">
                            <h3><span>Why sel</span> with us?</h3>
                            <div class="panel-group" id="accordion">

                                <div class="panel panel-accordion">
                                    <div class="panel-heading">
                                    <p class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    <span class="badge pull-right"><i class="icon-minus"></i></span>Integer sed porta quam tempus aliquam
                                    </a>
                                    </p>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                    <strong>Integer sed porta quam</strong>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
                                    </div>
                                    </div>
                                </div>

                                <div class="panel panel-accordion">
                                    <div class="panel-heading">
                                    <p class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                    <span class="badge pull-right"><i class="icon-plus"></i></span>Integer sed porta quam tempus aliquam
                                    </a>
                                    </p>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse collapse">
                                    <div class="panel-body">
                                    <strong>Integer sed porta quam</strong>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                                    </div>
                                    </div>
                                </div>

                                <div class="panel panel-accordion">
                                    <div class="panel-heading">
                                    <p class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                    <span class="badge pull-right"><i class="icon-plus"></i></span>Integer sed porta quam tempus aliquam
                                    </a>
                                    </p>
                                    </div>

                                    <div id="collapseThree" class="panel-collapse collapse">
                                    <div class="panel-body">
                                    <strong>Integer sed porta quam</strong>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                                    </div>
                                    </div>
                                </div>

                                <div class="panel panel-accordion">
                                    <div class="panel-heading">
                                    <p class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
                                    <span class="badge pull-right"><i class="icon-plus"></i></span>Integer sed porta quam tempus aliquam
                                    </a>
                                    </p>
                                    </div>

                                    <div id="collapseFour" class="panel-collapse collapse">
                                    <div class="panel-body">
                                    <strong>Integer sed porta quam</strong>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                                    </div>
                                    </div>
                                </div>

                                <div class="panel panel-accordion">
                                    <div class="panel-heading">
                                    <p class="panel-title">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseFive">
                                    <span class="badge pull-right"><i class="icon-plus"></i></span>Integer sed porta quam tempus aliquam
                                    </a>
                                    </p>
                                    </div>

                                    <div id="collapseFive" class="panel-collapse collapse">
                                    <div class="panel-body">
                                    <strong>Integer sed porta quam</strong>
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </div><!-- end row -->
                        
                        <!-- Text widget -->    
                        <div class="row">
                            <h3><span>Text</span> widget</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. <i class="icon-right-thin"></i></p>
                        </div><!-- end row -->
                        
                        <!-- Links Widgest -->  
                        <div class="row">
                            <h3><span>Link</span> list</h3>
                            <div class="list-group">
                                <a href="#" class="list-group-item"><i class="icon-right-open"></i>Cras justo odio</a>
                                <a href="#" class="list-group-item"><i class="icon-right-open"></i>Dapibus ac facilisis in</a>
                                <a href="#" class="list-group-item"><i class="icon-right-open"></i>Morbi leo risus</a>
                                <a href="#" class="list-group-item"><i class="icon-right-open"></i>Porta ac consectetur ac</a>
                                <a href="#" class="list-group-item"><i class="icon-right-open"></i>Vestibulum at eros</a>
                            </div>
                        </div><!-- end row -->
                        
                        <!-- Flickr Widget -->  
                        <div class="row">
                            <h3><span>More</span> cars on flickr</h3>
                            <ul class="flickr-feed"></ul>
                        </div><!-- end row -->

                    </aside>
                    <!-- End Sidebar -->
                </article>
            </div><!-- end row -->
        </div>
    </section>


    
    <footer>
       <!-- begin top Footer -->
         <jsp:include page="import/footer.jsp"/>
        <!-- begin bottom Footer -->
    </footer>



    <!-- Javascript Files -->

        <!-- jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write("<script src=\"js/jquery-1.9.1.min.js\"")</script>
        
        <!-- Respond.js media queries for IE8 -->
        <script src="js/respond.min.js"></script>
        
        <!-- Bootstrap-->
        <script src="js/bootstrap.min.js" ></script>
     
        <!-- Retina.js -->
        <script src="js/retina.js" ></script>

        <!-- Placeholder.js http://widgetulous.com/placeholderjs/ -->
        <script src="js/placeholder.js" ></script>
        
        <!-- Go to top -->
        <script src="js/jquery.scrollTo-1.4.3.1-min.js" ></script>
            
        <!-- Fleckr Feed -->
        <script src="js/jflickrfeed.js" ></script>

        <!-- Fancybox lightbox -->
        <script src="js/fancybox/jquery.fancybox.js"></script>       

        <!-- Custom -->
        <script src="js/script.js"  ></script>

    <!-- End Javascript Files -->

    </body>
</html>